<script lang="ts" setup>
import { h } from 'vue'
import { FolderViewOutlined, FormOutlined } from '@ant-design/icons-vue'

// 引用声明
const props = defineProps({
  item: {
    type: Object,
    default: () => {
    }
  }
})

// 引用事件
const emits = defineEmits(['menus'])

// 点击文案
const handleMenu = (c, b) => {
  emits('menus', { c, b })
}

/** menu列表 */
const menusList = [
  {
    value: 'edit',
    label: '修改标题信息',
    icon: () => h(FormOutlined)
  },
  {
    value: 'view',
    label: '查看内容',
    icon: () => h(FolderViewOutlined)
  }
]

/** 内容来源 */
const contentSourceEnum = (text) => {
  if (Number(text.insertDataSource) === 1001) {
    return `用户自创`
  } else if (Number(text.insertDataSource) === 1002) {
    return `全网医学科普节选`
  } else if (Number(text.insertDataSource) === 1003) {
    return `chatGpt智能聚合`
  } else {
    return text.insertDataSource
  }
}

/** 话题来源 */
const topicSourceEnum = (text) => {
  if (text.dataSourcePlatform) {
    return text.dataSourcePlatform
  } else if (Number(text.insertDataSource) === 1001) {
    return `用户自创`
  } else if (Number(text.insertDataSource) === 1002) {
    return `全网医学科普节选`
  } else if (Number(text.insertDataSource) === 1003) {
    return `chatGpt智能聚合`
  } else {
    return text.insertDataSource
  }
}

</script>

<template>
  <a-dropdown :trigger="['contextmenu']">
    <div class="list-items relative hover:bg-[#b4c7ff] hover:text-black hover:shadow-lg">

      <!-- 第一行 -->
      <div class="flex items-center ">
        <!-- 标题 -->
        <div class="title">{{ item.topicTitle }}</div>

        <!--        <div class="ml-auto bg-main py-2 px-3 text-white rounded-lg justify-center items-center hover:shadow-lg"-->
        <!--             @click="handleListItem">-->
        <!--          查看内容 {{ item.topicContentVOList.length }}-->
        <!--        </div>-->
      </div>


      <!-- 第二行 -->
      <div class="flex mt-1 mb-3">
        <a-space :size="30">
          <a-space>
            <div class="">科室:</div>
            <a-tag color="#f50">{{ item.firstClassificationName ? item.firstClassificationName : '暂无' }}</a-tag>
          </a-space>

          <a-space>
            <div class="">病种:</div>
            <a-tag color="#2db7f5">{{ item.secondClassificationName ? item.secondClassificationName : '暂无' }}</a-tag>
          </a-space>

          <a-space v-if="item.thirdClassificationName">
            <div class="">症状:</div>
            <a-tag color="#108ee9">{{ item.thirdClassificationName ? item.thirdClassificationName : '暂无' }}</a-tag>
          </a-space>
        </a-space>
      </div>

      <!-- 第三行 -->
      <div class="flex mt-3">
        <a-space :size="30">
          <a-space class="flex">
            <div class="">话题来源:</div>
            <div>{{ topicSourceEnum(props.item) }}</div>
          </a-space>

          <a-space class="flex">
            <div class="">内容来源:</div>
            <div>{{ contentSourceEnum(props.item) }}</div>
          </a-space>

          <a-space class="flex">
            <div class="">话题超链接:</div>
            <div>
              <a v-if="item.topicHyperlink" :href="item.topicHyperlink" target="_blank">点击</a>
              <div v-else>无</div>
            </div>
          </a-space>
        </a-space>
      </div>
    </div>

    <template #overlay>
      <a-menu @click="(c)=> handleMenu(c,item)">
        <a-menu-item v-for="(record) in menusList" :key="record.value" :icon="record.icon">
          {{ record.label }}
          <span v-if="record.value === 'view'">{{ item.topicContentVOList.length }}条</span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<style lang="less" scoped>
.list-items {
@apply m-3 p-3 rounded cursor-pointer;
  background-color: #f1f1f1;

  .title {
  @apply text-lg;
  }

  .images-images {
    width: 50px;
  }
}


</style>
